<template>
	<div class="box">
		<p>{{ props.attrs.title }}</p>
		<div class="bar"></div>
	</div>
</template>

<script setup lang="ts">
import { reactive, getCurrentInstance, onMounted, ref } from "vue";
import type { EChartsOption, EChartsType } from "echarts";
import type { IChartsProps } from "@/typings/charts";

interface IProps {
	title: string;
	dimensions: string[];
	source: Record<string, string | number>[];
}

const props = defineProps<IChartsProps<IProps>>();
const that = getCurrentInstance();
const barDom = ref<HTMLElement>();
const myBarChart = ref<EChartsType>();
const barOption = reactive<EChartsOption>({
	legend: {
		top: 15,
	},
	tooltip: {},
	dataset: {
		dimensions: props.attrs.dimensions,
		source: props.attrs.source.map((item) => item),
	},
	xAxis: {
		type: "category",
		axisLabel: {
			interval: 0,
			fontSize: 12,
		},
	},
	yAxis: {},
	series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
});

onMounted(() => {
	barDom.value = document.getElementsByClassName("bar")[0] as HTMLElement;
	myBarChart.value = that?.proxy?.$echarts.init(barDom.value);
	myBarChart.value?.setOption(barOption);
});
</script>

<style scoped lang="scss">
@import url(./index.scss);
</style>
